<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
        body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53;}
        h1,h2,h3,h4,h5,h6{font-size:100%;}
        address,cite,dfn,em,var{font-style:normal;}
        small{font-size:12px;}
        ul,ol{list-style:none;}
        a{text-decoration:none;}
        a:hover{text-decoration:underline;}
        .clear{clear: both;float: none;height: 0;overflow: hidden;}
        html .hide{display:none;}

        /* 品牌活动 */
        #jnBrand {
            height: 230px;
            margin:100px auto;
            overflow: hidden;
            width: 790px;
        }
        #jnBrandTab {
            border-bottom: 1px solid #E4E4E4;
            height: 29px;
            position: relative;
            width: 790px;
            float: left;
        }
        #jnBrandTab h2 {
            height: 29px;
            line-height: 29px;
            left: 0;
            position: absolute;
            width: 100px;
        }
        #jnBrandTab ul {
            position: absolute;
            right: 0;
            top: 10px;
        }
        #jnBrandTab li {
            float: left;
            margin: 0 10px 0 0;
        }
        #jnBrandTab li a {
            background-color: #E4E4E4;
            color: #000000;
            display: inline-block;
            height: 20px;
            line-height: 20px;
            padding: 0 10px;
        }
        #jnBrandTab .chos {
            background: url("img/chos.gif") no-repeat scroll 50% bottom transparent;
            padding-bottom: 3px;
        }
        #jnBrandTab .chos a {
            background-color: #FA5889;
            color: #FFFFFF;
            outline: 0 none;
        }
        #jnBrandContent {
            float: left;
            height: 188px;
            overflow: hidden;
            margin: 8px 5px;
            width: 790px;
            position: relative;
        }
        #jnBrandList {
            position: absolute;
            left: 0;
            top: 0;
            width: 3200px;
        }
        #jnBrandContent li {
            float: left;
            height: 188px;
            overflow: hidden;
            padding: 0 5px;
            position: relative;
            width: 185px;
        }
        #jnBrandContent li img {
            width: 160px;
            height:138px;
            left: 5px;
            position: absolute;
            top: 0;
        }
        #jnBrandContent li span {
            background-color: #EFEFEF;
            bottom: 0;
            color: #666666;
            display: inline-block;
            font-size: 14px;
            height: 28px;
            line-height: 24px;
            overflow: hidden;
            position: absolute;
            text-align: center;
            width: 183px;
        }
        #jnBrandContent li a {
            color:#666666;
        }
        #jnBrandContent li a:hover{
            color: #008CD7;
            text-decoration: none;
        }

    </style>
</head>
<body>
<!--最外层的大盒子-->
<div id="jnBrand">
    <!--上面的盒子-->
    <div id="jnBrandTab">
        <h2 title="品牌活动">表情包</h2>
        <ul>
            <li><a title="运动" href="#nogo">运动</a></li>
            <li><a title="女鞋" href="#nogo">静止</a></li>
            <li><a title="男鞋" href="#nogo">动漫</a></li>
            <li><a title="Applife" href="#nogo">手绘</a></li>
        </ul>
    </div>
    <!--下面的盒子-->
    <div id="jnBrandContent">
        <div id="jnBrandList">
            <ul>
                <li>
                    <a href="###1" class="JS_live"><img alt="耐克" src="img/1 (1).gif" /></a>
                    <span><a href="###1">鱼</a></span>
                </li>
                <li>
                    <a href="###2" class="JS_live"><img alt="阿迪达斯" src="img/1 (2).gif" /></a>
                    <span><a href="###2">颤抖</a></span>
                </li>
                <li>
                    <a href="###3" class="JS_live"><img alt="李宁" src="img/1 (3).gif" /></a>
                    <span><a href="###3">吐舌</a></span>
                </li>
                <li>
                    <a href="###4" class="JS_live"><img alt="安踏" src="img/1 (4).jpg" /></a>
                    <span><a href="###4">欣赏</a></span>
                </li>
                <li>
                    <a href="###1" class="JS_live"><img alt="耐克" src="img/1 (1).gif" /></a>
                    <span><a href="###1">鱼</a></span>
                </li>
                <li>
                    <a href="###2" class="JS_live"><img alt="阿迪达斯" src="img/1 (2).gif" /></a>
                    <span><a href="###2">颤抖</a></span>
                </li>
                <li>
                    <a href="###3" class="JS_live"><img alt="李宁" src="img/1 (3).gif" /></a>
                    <span><a href="###3">吐舌</a></span>
                </li>
                <li>
                    <a href="###4" class="JS_live"><img alt="安踏" src="img/1 (4).jpg" /></a>
                    <span><a href="###4">欣赏</a></span>
                </li>
                <li>
                    <a href="###1" class="JS_live"><img alt="耐克" src="img/1 (1).gif" /></a>
                    <span><a href="###1">鱼</a></span>
                </li>
                <li>
                    <a href="###2" class="JS_live"><img alt="阿迪达斯" src="img/1 (2).gif" /></a>
                    <span><a href="###2">颤抖</a></span>
                </li>
                <li>
                    <a href="###3" class="JS_live"><img alt="李宁" src="img/1 (3).gif" /></a>
                    <span><a href="###3">吐舌</a></span>
                </li>
                <li>
                    <a href="###4" class="JS_live"><img alt="安踏" src="img/1 (4).jpg" /></a>
                    <span><a href="###4">欣赏</a></span>
                </li>
                <li>
                    <a href="###1" class="JS_live"><img alt="耐克" src="img/1 (1).gif" /></a>
                    <span><a href="###1">鱼</a></span>
                </li>
                <li>
                    <a href="###2" class="JS_live"><img alt="阿迪达斯" src="img/1 (2).gif" /></a>
                    <span><a href="###2">颤抖</a></span>
                </li>
                <li>
                    <a href="###3" class="JS_live"><img alt="李宁" src="img/1 (3).gif" /></a>
                    <span><a href="###3">吐舌</a></span>
                </li>
                <li>
                    <a href="###4" class="JS_live"><img alt="安踏" src="img/1 (4).jpg" /></a>
                    <span><a href="###4">欣赏</a></span>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>
<script src="js/jquery-1.10.1.js"></script>
<script>
    $(function () {
        //得到一个li的宽度
        var aLiWidth = $("#jnBrandList ul li").outerWidth(true) * 4;
        var _index;
        $("#jnBrandTab li a").click(function () {
            _index = $("#jnBrandTab li a").index(this);
            $(this).parent().addClass("chos").siblings().removeClass("chos");
            $("#jnBrandList").animate({
                left : -aLiWidth * _index
            },1000)
        });
    })
</script>
